<template>
  <div style="padding: 10px">
    <d-details :detailsConfig="detailsConfig" v-model="data" direction="vertical">
      <template #name>
        <span>我是label插槽</span>
      </template>
      <template #date>
        <span>我是值插槽</span>
      </template>
    </d-details>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const data = ref({
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  })
  const detailsConfig = ref([
    {
      label: '姓名',
      prop: 'name',
      value: '',
      labelSlot: 'name',
      labelClassName: 'test',
      align: 'center'
    },
    { label: '日期', prop: 'date', value: '', align: 'center', slot: 'date' },
    { label: '地址', prop: 'address', value: '', align: 'center' }
  ])
</script>
<style scoped>
  ::v-deep(.test) {
    background-color: rgba(255, 0, 0, 0.1) !important;
  }
</style>
